<template>
<div>
  <div class="msg-list" v-for="item in list" @click="gotoDetail('/Index/Detail')">
    <div class="img-part">
      <!-- <img
        src="https://www.pmdaniu.com/storages/99649/b739b955e810f1cadeb4c1c946abdc83-57026/images/%E6%B6%88%E6%81%AF%E8%AF%A6%E6%83%85/u3119.png"
        alt=""
      /> -->
      <img :src=item.icon_url alt="">
    </div>
    <div class="text-part">
      <div class="title-part">
        <p class="title-part-first">{{item.name}}</p>
        <span class="">{{item.content}}</span>
      </div>
      <div class="time-part">
        <span>{{item.publish_time}}</span>
      </div>
    </div>
    
  </div>
</div>
  
</template>

<script>
import Detail from "@/views/dynamic/detail/Detail"
export default {
  props:['list'],
  components:{
    Detail
  },
  methods:{
    gotoDetail(path){
      this.$router.push(path)
    }
  }
};
</script>


<style lang="stylus" scoped>
@import '../../assets/stylus/ellipsis.styl';

.msg-list 
  display flex
  height 0.8rem
  width 100%
  padding 0.2rem 0.1rem 0.1rem 0.1rem;

  .img-part 
    width 0.6rem
    padding-right 0.1rem
    img 
      // width: 100%;
      width .5rem
      border-radius .5rem
  .text-part
      display flex
      justify-content space-around
      .title-part 
        display flex
        flex-direction column
        flex 1
        p
          flex 1
          // width 3rem
          font-weight .6rem
          font-size 0.16rem
        span
          font-size 0.14rem
          // display flex
          // width 1rem
          flex-wrap nowrap
          ellipsis(100% 1)
      .time-part 
        width .8rem
        display flex

        // flex-direction row
        flex-wrap nowrap
        justify-content flex-end

  

</style>